<script setup>
const props = defineProps({
  // 按钮尺寸
  size: {
    type: String,
    default: 'md', // 默认中等尺寸
    validator: (value) => ['sm', 'md', 'lg'].includes(value), // 限制为 sm、md、lg
  },
});

// 点击事件
const emit = defineEmits(['click']);

// 根据尺寸设置样式
const getButtonStyle = () => {
  switch (props.size) {
    case 'sm':
      return {
        padding: '5px 10px',
        fontSize: '14px',
      };
    case 'md':
      return {
        padding: '10px 20px',
        fontSize: '16px',
      };
    case 'lg':
      return {
        padding: '15px 30px',
        fontSize: '18px',
      };
    default:
      return {
        padding: '10px 20px',
        fontSize: '16px',
      };
  }
};
</script>

<template>
  <button
      class="btn-green"
      :style="getButtonStyle()"
      @click.stop="emit('click')"
  >
    <slot></slot>
  </button>
</template>

<style scoped>
.btn-green {
  background: linear-gradient(135deg, #00b09b, #96c93d);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.btn-green:hover {
  background: linear-gradient(135deg, #96c93d, #00b09b);
}
</style>